<template>
  <div class="doc-container">
    <!-- 顶部导航 -->
    <div class="doc-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>API文档</el-breadcrumb-item>
        <el-breadcrumb-item>SDK开发工具包</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="doc-content">
      <!-- 左侧目录 -->
      <div class="doc-sidebar">
        <div class="sidebar-header">
          <h3>SDK文档目录</h3>
        </div>
        <el-menu 
          :default-active="activeMenu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="overview">
            <i class="el-icon-guide"></i>
            <span>概述</span>
          </el-menu-item>
          <el-menu-item index="quickstart">
            <i class="el-icon-magic-stick"></i>
            <span>快速开始</span>
          </el-menu-item>
          <el-menu-item index="installation">
            <i class="el-icon-download"></i>
            <span>安装配置</span>
          </el-menu-item>
          <el-menu-item index="authentication">
            <i class="el-icon-lock"></i>
            <span>认证授权</span>
          </el-menu-item>
          <el-menu-item index="core-features">
            <i class="el-icon-menu"></i>
            <span>核心功能</span>
          </el-menu-item>
          <el-menu-item index="advanced">
            <i class="el-icon-s-operation"></i>
            <span>高级特性</span>
          </el-menu-item>
          <el-menu-item index="error-handling">
            <i class="el-icon-warning"></i>
            <span>错误处理</span>
          </el-menu-item>
          <el-menu-item index="best-practices">
            <i class="el-icon-trophy"></i>
            <span>最佳实践</span>
          </el-menu-item>
          <el-menu-item index="api-reference">
            <i class="el-icon-document"></i>
            <span>API参考</span>
          </el-menu-item>
          <el-menu-item index="changelog">
            <i class="el-icon-time"></i>
            <span>更新日志</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div class="doc-main" ref="docMain">
        <!-- 概述部分 -->
        <div class="content-section" id="overview">
          <h1>SDK开发工具包</h1>
          <div class="version-badge">
            <el-tag type="success">最新版本: v2.1.0</el-tag>
            <el-tag type="info">更新日期: 2024-03-20</el-tag>
          </div>
          
          <div class="section-content">
            <p class="intro-text">
              我们的SDK提供了一套完整的开发工具，帮助开发者快速集成和使用API服务。支持多种编程语言，提供统一的接口规范和丰富的功能特性。
            </p>
            
            <el-card class="feature-grid">
              <div class="feature-item">
                <i class="el-icon-cpu"></i>
                <h4>高性能</h4>
                <p>优化的网络请求，智能的缓存策略</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-magic-stick"></i>
                <h4>易集成</h4>
                <p>简单的API设计，详细的使用文档</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-umbrella"></i>
                <h4>安全可靠</h4>
                <p>内置安全机制，异常处理完善</p>
              </div>
              <div class="feature-item">
                <i class="el-icon-data-line"></i>
                <h4>可扩展</h4>
                <p>模块化设计，支持自定义扩展</p>
              </div>
            </el-card>

            <div class="language-support">
              <h3>支持的编程语言</h3>
              <div class="language-grid">
                <div class="language-item" v-for="lang in languages" :key="lang.name">
                  <img :src="lang.icon" :alt="lang.name">
                  <span>{{ lang.name }}</span>
                  <el-tag size="mini" :type="lang.status === 'stable' ? 'success' : 'warning'">
                    {{ lang.version }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速开始部分 -->
        <div class="content-section" id="quickstart">
          <h2>快速开始</h2>
          <div class="section-content">
            <el-steps :active="1" simple>
              <el-step title="安装SDK" icon="el-icon-download"></el-step>
              <el-step title="配置密钥" icon="el-icon-key"></el-step>
              <el-step title="开始使用" icon="el-icon-success"></el-step>
            </el-steps>

            <div class="installation-guide">
              <h3>1. 安装SDK</h3>
              <el-tabs type="border-card">
                <el-tab-pane label="Maven">
                  <div class="code-block">
                    <pre><code>&lt;dependency&gt;
    &lt;groupId&gt;com.etnor&lt;/groupId&gt;
    &lt;artifactId&gt;etnor-sdk&lt;/artifactId&gt;
    &lt;version&gt;2.1.0&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                    <el-button 
                      size="small" 
                      type="primary" 
                      class="copy-btn"
                      @click="copyCode('maven-dependency')"
                    >
                      复制
                    </el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="Gradle">
                  <div class="code-block">
                    <pre><code>implementation 'com.etnor:etnor-sdk:2.1.0'</code></pre>
                    <el-button 
                      size="small" 
                      type="primary" 
                      class="copy-btn"
                      @click="copyCode('gradle-dependency')"
                    >
                      复制
                    </el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="npm">
                  <div class="code-block">
                    <pre><code>npm install @etnor/sdk</code></pre>
                    <el-button 
                      size="small" 
                      type="primary" 
                      class="copy-btn"
                      @click="copyCode('npm-install')"
                    >
                      复制
                    </el-button>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>

            <div class="quick-example">
              <h3>2. 示例代码</h3>
              <el-card class="example-card">
                <div class="code-block">
                  <pre><code>// 初始化SDK客户端
const client = new EtnorSDK({
  apiKey: 'your-api-key',
  apiSecret: 'your-api-secret'
});

// 调用API
async function getData() {
  try {
    const response = await client.data.query({
      collection: 'users',
      filter: { age: { $gt: 18 } }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}</code></pre>
                  <el-button 
                    size="small" 
                    type="primary" 
                    class="copy-btn"
                    @click="copyCode('example-code')"
                  >
                    复制
                  </el-button>
                </div>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 其他内容部分... -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SdkDoc',
  data() {
    return {
      activeMenu: 'overview',
      languages: [
        {
          name: 'Java',
          icon: 'https://www.java.com/favicon.ico',
          version: 'v2.1.0',
          status: 'stable'
        },
        {
          name: 'Python',
          icon: 'https://www.python.org/favicon.ico',
          version: 'v2.0.1',
          status: 'stable'
        },
        {
          name: 'JavaScript',
          icon: 'https://nodejs.org/favicon.ico',
          version: 'v2.1.0',
          status: 'stable'
        },
        {
          name: 'Go',
          icon: 'https://golang.org/favicon.ico',
          version: 'v1.9.0',
          status: 'stable'
        }
      ]
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index;
      const element = document.getElementById(index);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    copyCode(code) {
      // 实现复制代码的逻辑
      navigator.clipboard.writeText(code).then(() => {
        this.$message.success('复制成功');
      }).catch(() => {
        this.$message.error('复制失败');
      });
    }
  }
}
</script>

<style scoped>
.doc-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.doc-nav {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.doc-content {
  display: flex;
  gap: 30px;
}

.doc-sidebar {
  width: 260px;
  position: sticky;
  top: 20px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.doc-main {
  flex: 1;
  max-width: 800px;
}

.content-section {
  margin-bottom: 60px;
}

.version-badge {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.intro-text {
  font-size: 1.1em;
  line-height: 1.6;
  color: #2c3e50;
  margin: 20px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  margin: 20px 0;
}

.feature-item {
  text-align: center;
  padding: 20px;
}

.feature-item i {
  font-size: 2.5em;
  color: #409EFF;
  margin-bottom: 15px;
}

.feature-item h4 {
  margin: 10px 0;
  color: #2c3e50;
}

.feature-item p {
  color: #666;
  font-size: 0.9em;
}

.language-support {
  margin: 40px 0;
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.language-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.language-item img {
  width: 24px;
  height: 24px;
}

.installation-guide {
  margin: 30px 0;
}

.code-block {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
  position: relative;
}

.code-block pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}

.example-card {
  margin: 20px 0;
}

h1 {
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 20px;
}

h2 {
  font-size: 2em;
  color: #2c3e50;
  margin: 30px 0 20px;
}

h3 {
  font-size: 1.5em;
  color: #2c3e50;
  margin: 25px 0 15px;
}

@media (max-width: 768px) {
  .doc-content {
    flex-direction: column;
  }

  .doc-sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .language-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>
